<template>
  <div class="index-box d-flex" ref="index">
		  	<div class="rightBox">
		  			<div class="main-box" >
		          <div class="search" ref="search">
		            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
		              class="demo-form-inline" id="searchBox">
                   <MyLeftTreeRetract :leftTreeShow.sync="leftTreeShow"></MyLeftTreeRetract>
		              <el-form-item prop="goodsCode">
		                  <el-input v-model="searchForm.goodsCode" clearable placeholder="请输入商品编号"></el-input>
		              </el-form-item>
                  <el-form-item prop="goodsName">
                      <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名称"></el-input>
                  </el-form-item>

                  <el-form-item prop="goodsStatus">
                   <el-select filterable clearable v-model="searchForm.goodsStatus" placeholder="上下架">
                     <el-option label="已上架" value="1"></el-option>
                     <el-option label="已下架" value="2"></el-option>
                   </el-select>
                  </el-form-item>
                  <el-form-item prop="goodsType">
                   <el-select filterable clearable v-model="searchForm.goodsType" placeholder="商品类型">
                     <el-option label="商家直销商品" value="1"></el-option>
                     <el-option label="活动特供商品" value="2"></el-option>
                     <el-option label="士多商品" value="3"></el-option>
                     <el-option label="霸王餐商品" value="4"></el-option>
                   </el-select>
                  </el-form-item>

		              <el-form-item prop="time">
		                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
		                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
		                  :picker-options="pickerOptions">
		                </el-date-picker>
		              </el-form-item>

		              <el-form-item class="clearfix">
		                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
		                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
		              </el-form-item>

		            </el-form>
		          </div>
		          <div class="actionBtn" ref="actionBtn">
		            <div class="actionBtnLeft">
		               <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus">添加商品</el-button>
		            </div>
		            <div class="actionBtnRight">
		                <MyRefresh/>
		            </div>
		          </div>
		          <div class="table" ref="table">
		            <el-table :data="dataList" style="width: 100%;"  border stripe :height="tableHeight" v-loading="loading">
		              <el-table-column prop="goodsCode" label="商品编号"  width="220"></el-table-column>
		              <el-table-column prop="name"  label="商品"  width="">
		                <template #default="scope">
		                  <div class="goodsBox">
		                    <div class="img">
		                      <el-image :src="scope.row.img" fit="fill" v-image-preview="scope.row.img"></el-image>
		                    </div>
		                    <div class="goodsRight">
		                      <div class="goodsName ellipsis-item">{{scope.row.goodsName}}</div>
		                    </div>
		                  </div>

		                </template>
		              </el-table-column>
		              <el-table-column prop="originalPrice" label="原价(元)"  align="center" width="140"></el-table-column>
		              <el-table-column prop="salePrice" label="平台售价(元)"  align="center"  width="140"></el-table-column>
		              <el-table-column prop="goodsStatus" label="上/下架"  align="center" sortable width="140">
		                <template #default="scope">
		                    <span @click="handleChangeUpDownStatus(scope.row)" :class="scope.row.goodsStatus=='2'?'down':'up'">{{scope.row.goodsStatus=='2'?'已下架':'已上架'}}</span>
		                </template>
		              </el-table-column>


                  <el-table-column prop="auditUserName" label="审核人信息"  align="center"  width="160">
                    <template slot-scope="scope">
                      {{scope.row.auditBy}}
                    </template>
                  </el-table-column>
                   <el-table-column prop="" label="商品类型"  align="center"  width="140">
                     <template slot-scope="scope">
                       <div v-if="scope.row.goodsType=='1'">商家直销商品</div>
                       <div v-else-if="scope.row.goodsType=='2'">活动特供商品</div>
                       <div v-else-if="scope.row.goodsType=='3'">士多商品</div>
                       <div v-else-if="scope.row.goodsType=='4'">霸王餐商品</div>
                     </template>
                   </el-table-column>
		              <el-table-column prop="name" label="状态"  align="center" width="120">
		                <template slot-scope="scope">
		                  <div class="tagBox" >
		                    <el-tag :type="scope.row.auditStatus=='1'?'primary':(scope.row.auditStatus=='2'?'success':'warning')" >
		                      {{scope.row.auditStatus=='1'?'待审核':(scope.row.auditStatus=='2'?'通过':'驳回')}}
		                    </el-tag>
		                  </div>
		                </template>
		              </el-table-column>
		              <el-table-column label="更新时间" align="center" prop="createTime" width="160" sortable>
		                <template slot-scope="scope">
		                  <span>{{ parseTime(scope.row.createTime) }}</span>
		                </template>
		              </el-table-column>
                 <!-- <el-table-column label="排序" align="center" prop="createTime" width="170" >
                    <template slot-scope="scope">
                      <div>
                        <el-button size="mini" @click="handleTop(scope.row,scope.$index)">置顶</el-button>
                        <el-button icon="el-icon-top" circle size="mini" @click="hanleSort(scope.row,scope.$index,'1')" :disabled="scope.$index=='0'"></el-button>
                        <el-button icon="el-icon-bottom" circle size="mini" @click="hanleSort(scope.row,scope.$index,'2')" :disabled="scope.$index==searchForm.pageSize-1"></el-button>
                      </div>
                    </template>
                  </el-table-column> -->
		              <el-table-column prop="name" label="操作"  align="center" width="190" fixed="right">
		                <template #default="scope">
		                      <el-button
		                        size="medium"
		                        type="text"
		                        @click="handleLook(scope.row)"
		                      >查看</el-button>
                          <el-button
                            size="medium"
                            type="text"
                            @click="handleEdit(scope.row)"
                          >修改</el-button>
                          <el-button
                              v-if="scope.row.auditStatus=='2' && scope.row.goodsType=='1'"
                             size="medium"
                             type="text"
                             @click="handleAppleActive(scope.row)"
                           >活动申请</el-button>
		                     <!-- <el-button
		                        size="medium"
		                        type="text"
		                        @click="handleDelete(scope.row)"
		                      >删除</el-button> -->
		                </template>
		              </el-table-column>
		            </el-table>
		          </div>
		          <div class="page" ref="page">
		            <MyPagination
		               :total="total"
		               :page.sync="searchForm.pageNum"
		               :limit.sync="searchForm.pageSize"
		               @pagination="dataInfo"
		             />
		          </div>
		        </div>
  	</div>


  </div>
</template>

<script>
  import common from '@/api/api';
  import { getGoodsList, GoodsUpdateStatus,addModuleGoods,getActivityModuleList  } from '@/api/getData';
  import option from '../../common/option.js';
  import { regionData,CodeToText } from 'element-china-area-data';
  export default {
    data() {
      return {
        loading: false,
        leftTreeShow: true,
        time:[],
        searchForm: {
          goodsCode:'',
          goodsName:'',
          goodsStatus:'',
          goodsType:"",
          pageNum: 1,
          pageSize: 20,
        },

        tableHeight:400,//table 高度
        dataList:[],
        total: 0,

        multipleSelection: '',

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      //this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          this.loading = true;
          const result = await getGoodsList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;

            let datas = result.rows;
            datas.map(item=>{
              item.img = item.goodsImage?(item.goodsImage.split(','))[0]:''
            })
            this.dataList = datas;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleAppleActive(row){
        let moduleId;
        getActivityModuleList().then((result)=>{
            if (result.code == 200) {
             moduleId = result.data[0].moduleId;
            }
        })
        this.$confirm(`是否将商品${row.goodsName}参加晚市促销?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let data = {

              moduleId: moduleId,
              storeOrGoodsId : row.goodsId,
              storeOrGoodsImage: row.goodsImage,
              storeOrGoodsName: row.goodsName
            }
            addModuleGoods(data).then((result)=>{
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.dataInfo();
                }
            })

        }).catch(() => {

        });

      },
      getSelect(){
        storeColumnlist({pageNum:1,pageSize:'10000'}).then(res=>{
          this.treeList[0].children = res.rows;
        });
        this.getSelectList('goods_audit_status').then(res=>{ this.goods_audit_status = res.data; })
      },
      handleLook(row){
        this.$router.push({path:'/shop/addShop',query:{goodsId:row.goodsId,type:'detail'}});
      },
      handleAllocationUserSearch(){
        this.tagList();
      },
      handleSelect(val,row){
        let index = '';
        console.log(this.multipleSelectionAllocationUser);
        for(let i=0;i<this.multipleSelectionAllocationUser.length;i++){
          if(this.multipleSelectionAllocationUser[i].tagId == row.tagId){
            index = i;
          }
        }
        if(index || index=='0'){
          this.multipleSelectionAllocationUser.splice(index,1)
        }else{
          this.multipleSelectionAllocationUser.push(row);
        }
      },


      handleEdit(row){
        this.$router.push({path:'/shop/addShop',query:{goodsId:row.goodsId}});
      },
      handleAdd(){
        this.$router.push({path:'/shop/addShop'});
      },
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$modal.confirm('是否确认删除商品名称为"' + row.goodsName + '"的数据？').then(function() {
          return deleteGoods({goodsId:row.goodsId});
        }).then((res) => {
          if(res.code == 200){
            this.dataInfo();
            this.$modal.msgSuccess("删除成功");
          }else{
            this.$modal.msgError("删除失败");
          }
        }).catch(() => {});
      },

      async handleChangeUpDownStatus(row) {/*上下架*/
        try {
          if(row.auditStatus=='2'){
              this.$confirm(`您确定要${row.goodsStatus=='2'?'上架':'下架'}?`, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let data = {
                    goodsId : row.goodsId,
                    status: row.goodsStatus=='1'?'2':'1'
                  }
                  GoodsUpdateStatus(data).then((result)=>{
                  		if (result.code == 200) {
                        this.$message.success(result.msg);
                         row.goodsStatus=='1'?(row.goodsStatus='2'):(row.goodsStatus='1');
                      } else {
                        this.$message.error(result.msg);

                      }
                  })

              }).catch(() => {

              });

          }else{
            this.$message.error('商品审核通过才能上下架')
          }

        } catch (err) {
          console.log(err)
        }
      },
      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
    }
  }
</script>

<style scoped lang="scss">
  .tableDialog /deep/ .el-table__header-wrapper  .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
    display:none
  }
	.searchAddress /deep/ .el-input{
		width:220px!important;
	}
  .tagBox{
    cursor: pointer;
  }
  .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding: 10px;
      height: 52px;
  }
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:3px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
  .treeTitle{
    color: #606266;
    font-size: 15px;
    font-weight: bold;
    margin:20px 20px 0 20px;
  }
</style>
